/*系统主要颜色变量声明start*/
:root {
  --color-blue-main: #517EF6;
  /*系统主蓝色*/
  --color-black-main: #2E3340;
  /*系统主黑色*/
  --color-gray-main: #96A0B3;
  /*系统主灰色*/
  --color-gray-secondary: #C1CAD8;
  /*系统辅助灰色*/
  --color-red-main: #FF102D;
  /*系统主红色*/
  --color-green-main: #549903;
  /*系统主绿色*/
}

/*系统主要颜色变量声明end*/

/*字体图标前缀icon*/
[class*="icon-ali"],
.common-confirm-box [class*="el-icon-warning"],
.common-confirm-box [class*="el-icon-success"],
.common-confirm-box [class*="el-icon-error"] {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*改写确认弹框中的icon*/
.common-confirm-box .el-icon-warning:before {
  content: "\e680";
}

.common-confirm-box .el-icon-success:before {
  content: "\e67d";
}

.common-confirm-box .el-icon-error:before {
  content: "\e653";
}

/*查看页两列布局样式start*/
/*每一个查看项的父盒子，仅需在右侧内容可能换行时使用*/
.common-item-box {
  display: flex;
  line-height: 19px;
  word-break: break-all;
  word-wrap: break-word;
}

/*查看页两栏布局左侧标题样式*/
/*文字后的冒号统一使用中文冒号*/
.common-item-label {
  display: inline-block;
  width: 210px;
  flex: 0 0 210px;
  text-align: right;
  font-weight: 700;
  color: var(--color-black-main);
}


.common-item-label-left {
  display: inline-block;
  /* width: 210px;
  flex: 0 0 210px; */
  /* text-align: right; */
  font-weight: 700;
  color: var(--color-black-main);
}

/*查看页两列布局样式end*/

/*按钮样式start*/
.el-button {
  border-radius: 3px;
}

/*大按钮样式*/
.el-button.common-btn-primary,
.el-button.common-btn-secondary,
.el-button.common-btn-solid {
  min-width: 110px;
  padding: 7px 10px;
}

/*中等按钮样式*/
.el-button.btn-short {
  min-width: 80px;
  padding: 8px 10px;
}

/*小按钮长度，需搭配size="small"使用*/
.el-button.common-btn-primary.el-button--small,
.el-button.common-btn-secondary.el-button--small,
.el-button.common-btn-solid.el-button--small,
.el-button.common-btn-text.el-button--small {
  min-width: 60px;
  padding: 8px 10px;
  font-size: 14px;
}

/*主按钮样式start*/
.el-button.common-btn-primary {
  color: #fff;
  background-color: var(--color-blue-main);
  border-color: var(--color-blue-main);
}

.el-button.common-btn-primary:hover {
  background-color: #4471E8;
}

/*主按钮样式end*/
/*次按钮样式start*/
.el-button.common-btn-secondary {
  color: var(--color-blue-main);
  background: rgba(81, 126, 246, 0.1);
  border: 1px solid var(--color-blue-main);
}

.el-button.common-btn-secondary:hover {
  background: rgba(81, 126, 246, 0.2);
}

.el-button.common-btn-secondary i {
  margin-right: 5px;
}

/*次按钮样式end*/
/*线框按钮样式start*/
.el-button.common-btn-solid {
  color: var(--color-blue-main);
  border-color: var(--color-blue-main);
  background: none;
}

.el-button.common-btn-solid:hover {
  color: #4471E8;
  border-color: #4471E8;
}

/*线框按钮样式end*/
/*表格按钮样式start*/
.el-button.common-btn-table {
  min-width: 40px;
  height: 40px;
  padding: 0 6px;
  color: var(--color-blue-main);
  background-color: rgba(81, 126, 246, 0.1);
  border-color: rgba(81, 126, 246, 0.3);
  font-size: 12px;
}

.el-button.common-btn-table i {
  display: block;
}

.el-button.common-btn-table:hover {
  border-color: var(--color-blue-main);
}

/*表格按钮的删除按钮需搭配类名common-table-delete使用*/
.el-button.common-btn-table.common-table-delete {
  color: var(--color-red-main);
}

.el-button.common-btn-table.common-table-delete:hover {
  color: #E10B25;
}

/*表格按钮样式end*/
/* 表格合并斜线start */
.common-table-theard .el-table thead.is-group th {
  background: none;
}

.common-table-theard .el-table thead.is-group tr:first-of-type th:first-of-type {
  border-bottom: none;
}

.common-table-theard .el-table thead.is-group tr:first-of-type th:first-of-type:before {
  content: '';
  position: absolute;
  width: 1px;
  height: 75px;
  top: 0;
  left: 0;
  background-color: #DCDCDC;
  opacity: 0.3;
  display: block;
  transform: rotate(-48.7deg);
  transform-origin: top;
}

.common-table-theard .el-table thead.is-group tr:nth-child(2) th:first-of-type:before {
  content: '';
  position: absolute;
  width: 1px;
  height: 110px;
  bottom: 0;
  right: 0;
  background-color: #DCDCDC;
  opacity: 0.3;
  display: block;
  transform: rotate(-50deg);
  transform-origin: bottom;
  /* // background:red; */
}

/* 表格合并斜线end */
/*文字按钮样式start*/
.common-btn-text {
  color: var(--color-blue-main);
  font-size: 14px;
  cursor: pointer;
  display: inline-block;
}

.common-btn-text i {
  /* display: block; */
  color: var(--color-gray-main);
}

.common-btn-text:hover {
  color: #4471EB;
}

.common-btn-text+.common-btn-text {
  margin-left: 10px;
}

.el-button.common-btn-text {
  padding: 0;
  border: none;
  background: none;
}

/*文字按钮的删除按钮需搭配类名common-table-delete使用*/
.common-btn-text.common-table-delete {
  color: var(--color-red-main);
}

.common-btn-text.common-table-delete:hover {
  color: #E10B25;
}

/*文字按钮样式end*/
/*带下划线的文字需要另外加该样式*/
.common-text-line {
  text-decoration: underline;
}

/*各按钮active样式*/
.el-button.common-btn-primary:active,
.el-button.common-btn-secondary:active,
.el-button.common-btn-solid:active,
.el-button.common-btn-table:active,
.common-btn-text:active,
.common-btn-text:active i,
.el-button.common-btn-text:active {
  opacity: 0.7;
}

/*主按钮、线框按钮、表格按钮、文字按钮禁用状态公共样式，
其中主按钮、线框按钮、表格按钮搭配属性disabled使用，
文字按钮搭配类名common-btn-disabled使用*/
.el-button.common-btn-primary.is-disabled {
  background: #D8DDE6;
  border-color: #D8DDE6;
}

.el-button.common-btn-solid.is-disabled {
  color: var(--color-gray-secondary);
  border-color: var(--color-gray-secondary);
  background: none;
}

.el-button.common-btn-table.is-disabled {
  color: var(--color-gray-secondary);
  background: #F7F9FC;
  border-color: #EDEFF4;
}

.common-btn-text.common-btn-disabled,
.common-btn-text.common-btn-disabled i {
  color: var(--color-gray-secondary);
  cursor: not-allowed;
}

.el-button.common-btn-primary.is-disabled:hover {
  color: #fff;
}

.el-button.common-btn-primary.is-disabled:active,
.el-button.common-btn-solid.is-disabled:active,
.el-button.common-btn-table.is-disabled,
.common-btn-text.common-btn-disabled,
.common-btn-text.common-btn-disabled i {
  opacity: 1;
}

.el-button.common-btn-solid.blue {
  background: #ECF0FC;
}

/*按钮样式end*/

/*页面底部确定取消栏start*/
/*页面出现滚动条的底栏搭配类名common-footer-overflow使用*/
.common-footer-box {
  text-align: right;
  border-top: 1px solid #E9EAEC;
  /* background: #FAFAFD; */
  opacity: 0.9;
  height: 90px;
  line-height: 90px;
  z-index: 2;
}

.common-footer-overflow .common-footer-box {
  position: fixed;
  left: 0;
  bottom: 0;
}

.common-footer-box .common-btn-primary {
  margin: 0 40px 0 30px;
}

.common-footer-overflow .common-footer-box {
  position: fixed;
  left: 271px;
  right: 0;
  bottom: 0;
}

.home-narrow .common-footer-overflow .common-footer-box {
  left: 61px;
}

.common-footer-box .common-btn-primary {
  margin: 0 40px 0 30px;
}

/*将底栏固定时需在common-footer-box再加一个类名为common-footer-content的div*/
.common-footer-content {
  max-width: 1100px;
  margin: 0 auto;
}

/*弹框中的确定取消栏*/
.el-dialog__footer {
  padding: 0;
}

.el-dialog .common-footer-box {
  height: 60px;
  line-height: 60px;
  position: static;
}

.el-dialog .common-footer-box .common-btn-primary {
  margin: 0 30px 0 20px;
}

.dialog-form .el-form {
  padding-bottom: 40px;
}

.dialog-form .el-form .el-form-item__content {
  width: 200px;
}

.dialog-form .el-dialog__header {
  border-bottom: 1px solid #E9EAEC;
  padding-bottom: 15px;
}

.common-footer-box.active {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  padding-right: 40px;
}

/*页面底部确定取消栏end*/

/* 编辑新增保存提交 */
.common-footer {
  height: 90px;
  line-height: 90px;
  text-align: center;
  background-color: #F6F6F6;
}

/*确认弹框样式重写start*/
.common-confirm-box.el-message-box {
  width: 300px;
  padding-bottom: 0;
  border-radius: 2px;
}

.common-confirm-box-active.el-message-box {
  width: 350px;
}

.common-confirm-box.el-message-box--center .el-message-box__title {
  flex-direction: column;
}

.common-confirm-box .el-message-box__status {
  font-size: 35px !important;
  padding: 0 0 18px;
}

.common-confirm-box .el-message-box__header {
  padding-bottom: 0;
}

.common-confirm-box .el-message-box__title {
  color: #000;
  font-size: 16px;
}

.common-confirm-box .el-message-box__content {
  color: #595959;
  padding: 0 15px 30px;
}

.common-confirm-box.el-message-box--center .el-message-box__btns {
  text-align: right;
  padding: 0 30px 0 0;
  height: 60px;
  line-height: 60px;
  background: #FAFAFD;
  border-top: 1px solid var(--color-gray-secondary);
}

.common-confirm-box.big .el-message-box__btns .el-button--primary {
  width: 110px;
  padding: 12px 20px;
  color: #FFFFFF;
  background-color: #517EF6;
  border-color: #517EF6;
}

/*确认弹框样式重写end*/

/*查询区域*/
.common-query-box {
  padding: 20px 0 0 30px;
  background: #fff;
  /* border-bottom: 1px solid var(--color-gray-secondary); */
}

/*查询区输入框大小重写*/
.common-query-box .el-select {
  width: 160px;
}

.common-query-box .el-input__inner {
  height: 32px;
  line-height: 32px;
}

/*表格区域*/
.common-table-box {
  padding: 10px 20px 20px 20px;
  background: #fff;
  border-radius: 2px;
}

/*列表页面包屑*/
.common-list-bread {
  position: relative;
  height: 45px;
  line-height: 45px;
  font-size: 16px;
  font-weight: 700;
  padding-left: 20px;
}

.common-list-bread::after {
  content: '';
  position: absolute;
  left: 14px;
  top: 15px;
  width: 3px;
  background-color: #4867E5;
  height: 16px;
}

/*二级页面容器start*/
/*二级页面面包屑start*/
.common-check-bread {
  height: 60px;
  line-height: 60px;
  font-weight: 700;
  font-size: 16px;
  max-width: 1070px;
  min-width: 910px;
  margin: 0 auto;
  width: 100%;
}

.common-check-bread .el-button {
  margin-right: 20px;
}

/*二级页面面包屑end*/
.common-check-container {
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 10px;
}

.common-content-box {
  overflow-y: auto;
  flex: 1;
}

.common-detail-box {
  width: 100%;
  /* max-width: 1070px; */
  min-width: 1240px;
  /* min-width: 910px; */
  margin: 0 auto;
  background: #fff;
}

.common-content-box.common-footer-overflow .common-detail-box {
  padding-bottom: 90px !important;
}

/*二级页面容器end*/
/*查看页的表格样式start*/
.el-table.common-check-table {
  border: 1px solid var(--color-gray-secondary);
  border-bottom: none;
  border-radius: 2px;
}

.el-table.common-check-table th.is-leaf {
  border-bottom: none;
}

.el-table.common-check-table td {
  border-bottom: 1px dashed var(--color-gray-secondary);
}

.el-table.common-check-table::before {
  background-color: var(--color-gray-secondary);
}

/*查看页的表格样式end*/
/*溢出...*/
.common-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*日期start*/
.common-date-content {
  display: inline-block;
  position: relative;
  left: 10px;
  top: 3px;
  width: 235px;
  margin-left: -10px;
  border: 1px solid #DCDFE6;
  border-radius: 2px;
}

.common-date-content .desc {
  position: absolute;
  left: 118px;
  z-index: 11;
}

.common-date-content .el-input__inner {
  border: none;
}

.common-date-content .endTime span i.el-icon-date {
  display: none;
}

.common-date-content .date-input .el-input__suffix {
  right: 0;
}

.common-date-content .date-input .el-input__icon {
  line-height: 30px;
}

.common-date-content .date-input .el-input__inner {
  width: 100px;
  height: 30px;
  line-height: 30px;
  padding: 0 2px 0 15px;
  margin-left: 20px;
}

.common-query-box .date__content .el-form-item__content {
  height: 30px;
  line-height: 30px;
}

/*日期end*/
/*查看页两列布局start*/
/*当一行中展示两项时使用，如仅展示一项内容，可直接使用common-item-box*/
.common-two-box {
  display: flex;
}

.common-two-box>div {
  width: 50%;
}

.common-two-box .el-input__inner {
  width: 220px;
}

/*查看页布局end*/
/*按钮分割线样式*/
.common-button-separator {
  display: inline-block;
  width: 2px;
  height: 13px;
  background-color: rgba(216, 216, 216, 0.60);
  margin: 0 10px;
}

/*用于带tooltip的禁用按钮的父元素*/
.el-button+.common-margin-left-10,
.common-margin-left-10+.el-button {
  margin-left: 10px;
}